import React, { Component } from 'react'
import { Image, Form } from 'react-bootstrap'
import intl from 'react-intl-universal'
import CartItemInputNumber from './CartItemInputNumber/CartItemInputNumber'
import { httpPut, httpDelete } from '../../../services/http'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import './CartGoodsItem.less'

// const popover = (
//   <Popover id = {'popover-delete'}>
//     <Popover.Title as = "h3">你确定要删除这件商品吗?</Popover.Title>
//     <Popover.Content>
//       <Button>取消</Button>
//       <Button>确定</Button>
//     </Popover.Content>
//   </Popover>
// )

// TODO 这个页面应该需要路由守卫的 但是React没有路由守卫 需要自行定义高阶组件
class CartGoodsItem extends Component {
  state = { flag: false }
  ref = React.createRef()

  componentDidMount () {
    this.setIntl()
  }

  setNum = async (num) => {
    const { item } = this.props
    const { goods } = item
    if (num >= 1 && num <= goods.inventory && num !== item.goods_num) {
      this.putCart(num)
    }
  }

  putCart = async (goods_num) => {
    const { item, onGetCart } = this.props
    const [res, err] = await httpPut({
      url: '/cart/putCart', data: {
        cid: item._id, goods_num,
        gid: item.goods._id
      }
    })
    if (res) {
      console.log(res, '修改购物车成功')
      onGetCart()
    } else {
      console.log(err, '修改购物车失败')
      onGetCart()
    }
  }

  setIntl = () => {
    const { goods } = this.props.item
    const zh = {
      // intl 要求是一个字符串 这里转换为字符串
      [goods.enTitle]: '' + goods.zhTitle,
      [goods.enPrice]: '' + goods.zhPrice
    }
    const en = {
      [goods.enTitle]: '' + goods.enTitle,
      [goods.enPrice]: '' + goods.enPrice
    }
    intl.load({
      'zh-CN': zh,
      'en-US': en
    })
    this.setState({ flag: true })
  }

  handleDelete = async () => {
    const { item, onGetCart } = this.props
    const [res, err] = await httpDelete({
      url: '/cart/deleteCart', params: {
        cid: [item._id]
      }
    })
    if (res) {
      console.log(res, '购物车删除成功')
      onGetCart()
    } else {
      console.log(err, '购物车删除失败')
      onGetCart()
    }
  }

  handleSelect = (e) => {
    this.props.onSelectCheck(e.target.id, e.target.checked)
  }

  render () {
    const { item } = this.props
    const { goods } = item
    return (
      // TODO 能不能再优化以下这里的布局
      this.state.flag && <>
        <tr id = {'cart-goods-item'}>
          <td>
            <Form.Check
              onChange = {this.handleSelect} type = "checkbox"
              checked = {item.checked} disabled = {!item.status}
              custom id = {item._id} />
          </td>
          <td style = {{ maxWidth: '150px' }}>
            <Image src = {goods.img[0]} className = {'w-100'} />
          </td>
          <td>
            <span>{intl.get(goods.enTitle)}</span>
          </td>
          <td>
            <span>{intl.get('$') + intl.get(goods.enPrice)}</span>
          </td>
          <td>
            <CartItemInputNumber
              disabled = {!item.status}
              goods_num = {item.goods_num}
              onSetNum = {this.setNum} />
          </td>
          <td>
            {/* TODO 后续可以使用Overlay加上删除提示*/}
            {/*<OverlayTrigger*/}
            {/*  trigger = {'click'}*/}
            {/*  overlay = {popover}*/}
            {/*>*/}
            {/*</OverlayTrigger>*/}
            <FontAwesomeIcon
              style = {{ cursor: 'pointer' }}
              onClick = {this.handleDelete}
              icon = {'trash'} />
          </td>
        </tr>
      </>
    )
  }
}

export default CartGoodsItem
